import React from 'react';
import { FloatButton, Badge, Modal, Progress, Typography, Space, Button } from 'antd';
import { ClockCircleOutlined, PlayCircleOutlined, PauseCircleOutlined, StopOutlined } from '@ant-design/icons';
import { useBackgroundTimer } from './BackgroundTimerManager';

const { Text } = Typography;

const BackgroundTimerIndicator: React.FC = () => {
  const { timerState, isBackgroundActive, pauseTimer, resumeTimer, stopTimer } = useBackgroundTimer();
  const [modalVisible, setModalVisible] = React.useState(false);

  // 如果计时器不在运行或不在后台，不显示指示器
  if (!isBackgroundActive || (!timerState.isRunning && !timerState.isPaused)) {
    return null;
  }

  const formatTime = (seconds: number) => {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
  };

  const getProgressPercent = () => {
    if (!timerState.currentTimer) return 0;
    const totalTime = timerState.currentTimer.work_duration * 60;
    return Math.round(((totalTime - timerState.timeLeft) / totalTime) * 100);
  };

  const handleTimerControl = () => {
    if (timerState.isRunning) {
      pauseTimer();
    } else if (timerState.isPaused) {
      resumeTimer();
    }
  };

  const handleStopTimer = () => {
    stopTimer();
    setModalVisible(false);
  };

  return (
    <>
      <FloatButton
        icon={<ClockCircleOutlined />}
        type="primary"
        style={{
          right: 24,
          bottom: 24,
          zIndex: 1000
        }}
        onClick={() => setModalVisible(true)}
        badge={{
          count: formatTime(timerState.timeLeft),
          style: { backgroundColor: '#52c41a' }
        }}
      />
      
      <Modal
        title={
          <Space>
            <ClockCircleOutlined />
            <span>后台专注计时器</span>
            <Badge 
              status={timerState.isRunning ? 'processing' : 'default'} 
              text={timerState.isRunning ? '运行中' : '已暂停'} 
            />
          </Space>
        }
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        footer={[
          <Button key="stop" danger icon={<StopOutlined />} onClick={handleStopTimer}>
            停止计时器
          </Button>,
          <Button key="close" onClick={() => setModalVisible(false)}>
            关闭
          </Button>
        ]}
        width={400}
      >
        <div style={{ textAlign: 'center', padding: '20px 0' }}>
          <Text strong style={{ fontSize: '18px' }}>
            {timerState.currentTimer?.name}
          </Text>
          
          <div style={{ margin: '20px 0' }}>
            <Text style={{ fontSize: '48px', fontWeight: 'bold', color: '#1890ff' }}>
              {formatTime(timerState.timeLeft)}
            </Text>
          </div>
          
          <Progress
            percent={getProgressPercent()}
            strokeColor={{
              '0%': '#108ee9',
              '100%': '#87d068',
            }}
            style={{ marginBottom: '20px' }}
          />
          
          <Space size="large">
            <Button
              type="primary"
              size="large"
              icon={timerState.isRunning ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
              onClick={handleTimerControl}
            >
              {timerState.isRunning ? '暂停' : '继续'}
            </Button>
          </Space>
          
          <div style={{ marginTop: '20px', color: '#666' }}>
            <Text type="secondary">
              {timerState.isRunning ? '计时器正在后台运行...' : '计时器已暂停'}
            </Text>
          </div>
        </div>
      </Modal>
    </>
  );
};

export default BackgroundTimerIndicator;
